import React, { Component, PropTypes } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        borderWidth:1,
        borderTopColor: 'red',
        borderLeftColor: 'blue',
        borderRightColor: 'green',
        borderBottomColor:'orange',
        borderTopLeftRadius:20,
        borderTopRightRadius:20,
        borderBottomLeftRadius:20,
        borderBottomRightRadius:20,
        paddingLeft:10,
        paddingRight:10,
        margin:20
    },
    rowContainer: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        fontSize: 14,
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

class ColorBorderView extends Component {
    static propTypes = {
        dataArray: PropTypes.array
    };

    showSingleRow(data){
        if(data && data.length) {
            let list = data.map((p,i)=>{
                const _style = i===0?styles.welcome:styles.instructions;
                return(<Text key={'top'+i} style={_style}>{p}</Text>);
            });
            return (<View style={styles.rowContainer}>
                { list }
            </View>);
        }
        return (<View/>);
    }


    render() {
        return (
            <View style={styles.container}>
                { this.showSingleRow(this.props.dataArray) }
            </View>
        );
    }
}

export default ColorBorderView;